<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html lang="zh-CN">
<head>
<style type="text/css">
.id {
	width: 500px;
	height: 30px;
	font-size: 20px;
}

.btn {
	height: 35px;
	font-size: 20px;
}

.h5 {
	background-color: #BCD2EE;
}

td {
	height: 30px;
}

input {
	height: 100%;
	background-color: #ccc;
}

.h5 input {
	background-color: #BCD2EE;
}

.banner_preview {
	height: 100%;
	width: 80px;
}
</style>
<title>Banner 上线计划</title>
<body>

	<h4>Banner 上线计划，每10分钟会自动上线符合条件的Banner</h4>
	<table border="1">
		<thead>
			<tr>
				<th>类型</th>
				<th>序</th>
				<th>Banner view</th>
				<th>Banner PIC</th>
				<th>链接</th>
				<th>状态</th>
				<th>上线时间</th>
				<th>下线时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="index">序</td>
				<td><img class="banner_preview"  /></td>
				<td><input class="pic" /></td>
				<td><input class="href" /></td>
				<td>--</td>
				<td><input class="begin_time" /></td>
				<td><input class="end_time" /></td>
				<td><button class="btn-save">保存</button></td>
			</tr>
		</tbody>

	</table>
	<script src="../static/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		$(function() {
			var trTemplate = $("tbody").find("tr");
			trTemplate.remove();
			for (var i = 0; i < 20; i++) {
				var newTr = trTemplate.clone();
				newTr.find(".index").html(i + 1);
				if (i == 0) {
					$("<td rowspan='10'>APP</td>").insertBefore(
							newTr.find("td:first"));
				}
				if (i == 10) {
					$("<td rowspan='10'>微信</td>").insertBefore(
							newTr.find("td:first"));
				}
				newTr.attr("type", "app");
				newTr.attr("banner_id", "banner.plan.app."+(i+1));
				if (i >= 10) {
					newTr.addClass("h5");
					newTr.attr("type", "h5"); 
					newTr.attr("banner_id", "banner.plan.h5."+(i+1));
				}
				newTr.attr("num", i + 1);
				$("tbody").append(newTr);
			}
			$(".btn-save").click(
					function() {
						var tr = $(this).parent().parent();
						var p = {
							t : new Date(),
							id : "banner.plan." + tr.attr("type") + "."
									+ tr.attr("num"),
							pic : tr.find(".pic").val().trim(),
							href : tr.find(".href").val().trim(),
							begin_time : tr.find(".begin_time").val().trim(),
							end_time : tr.find(".end_time").val().trim()
						};
						$.post("banner_plan_save.htm", p, function(data) { 
							alert(JSON.stringify(data));
						}, "json");
					});
			
			
			$.post("list_banner_plan.htm",{
				t:new Date()
			},function(data){
				for(var key in data){
					var valJson = eval("("+data[key]+")");
					var tr = $("[banner_id='"+key+"']");
					tr.find(".pic").val(valJson.pic); 
					tr.find(".href").val(valJson.href); 
					tr.find(".begin_time").val(valJson.begin_time); 
					tr.find(".end_time").val(valJson.end_time);  
					tr.find(".banner_preview").attr("src",valJson.pic);
				} 
			},"json");
			
		});
	</script>
</body>
</html>
